<template>
    <div class="image-preview">
        <img v-for="url in images" :src="url" :key="url">
    </div>
</template>
<script>
import 'viewerjs/dist/viewer.css';
import Viewer from 'viewerjs';
export default {
    name: "ImagePreview",
    props: {
        value: {
            type: Object,
            default: null,
        },
    },
    data () {
        return {
            viewer: null,
            images: [],
        };
    },
    watch: {
        value (newval, oldval) {
            this.openViewer();
        }
    },
    methods: {
        openViewer () {
            if (this.value) {
                const option = {
                    navbar: false, // 图片列表导航条
                    title: false,
                    movable: false,
                    tooltip: false,
                    // zoomable:false,
                    className: 'viewer-image-preview',
                    toolbar: {
                        prev: 4,
                        next: 4,
                    }
                }
                this.images = this.value.images || [];
                this.$nextTick(() => {
                    this.viewer = this.viewer || new Viewer(this.$el, option);
                    this.viewer.update();
                    this.viewer.view(this.value.index);
                    this.viewer.show();

                })
            }
        },
    },
    mounted () {
        this.openViewer();
    },

    beforeDestroy () {
        this.viewer = this.viewer && this.viewer.destroy() && false;
    },
};
</script>
<style lang="scss" scoped>
.image-preview {
    display: none !important;
}
</style>
